<template>
    <view class="detail">
        <view class="fixbg" :style="{ backgroundImage: `url(${songDetail.al.picUrl})` }"></view>
        <music-head :title="songDetail.name" :showIcon="true" color="white"></music-head>
        <view class="container">
            <scroll-view scroll-y="true" >
                <view class="detail-play">
                    <image :src="songDetail.al.picUrl" :class="[{ 'play-run': isPlayRotate }]"></image>
                    <text class="iconfont" :class="iconPlay"></text>
                    <view></view>
                </view>
                
                <view class="detail-lyric">
                    <view class="detail-lyric-wrap">
<!--                        <view class="detail-lyric-item active">
                            测试文字、测试文字、测试文字
                        </view> -->
                        <view
                            class="detail-lyric-item"
                            :class="[{ active: index === lyricCurrentIndex }]"
                            v-for="(item, index) in songLyric"
                            :key="index"
                        >
                            {{ item.lyric }}
                        </view>
                    </view>
                </view>
                
                <view class="detail-like">
                    <view class="detail-like-head">
                        喜欢这首歌的人也听
                    </view>
                    
<!--                    <view class="detail-like-item">
                        <view class="detail-like-item-img">
                            <image src="../../static/logo.png" mode=""></image>
                        </view>
                        
                        <view class="detail-like-item-song">
                            <view>
                                蓝
                            </view>
                            <view>
                                <image src="../../static/dujia.png" mode=""></image>
                                <image src="../../static/sq.png" mode=""></image>
                                饰白漆 -- 蓝
                            </view>
                        </view>
                        <text class="iconfont iconbofang"></text>
                    </view> -->
                    
                    <view
                        class="detail-like-item"
                        v-for="(item, index) in songSimi"
                        :key="index"
                    >
                        <view class="detail-like-item-img">
                            <image :src="item.album.picUrl" mode=""></image>
                        </view>
                        
                        <view class="detail-like-item-song">
                            <view>
                                {{ item.name }}
                            </view>
                            <view>
                                <image
                                    v-if="item.privilege.flag > 60 && item.privilege.flag < 70"
                                    src="../../static/dujia.png"
                                ></image>
                                <image
                                    v-if="item.privilege.maxbr === 999000"
                                    src="../../static/sq.png"
                                ></image>
                                {{item.album.artists[0].name}} -- {{item.name}}
                            </view>
                        </view>
                        <text class="iconfont iconbofang"></text>
                    </view>
                </view>
                
                <view
                    class="detail-comment"
                >
                    <view class="detail-comment-head">
                        精彩评论
                    </view>
                    
<!--                    <view
                        class="detail-comment-item"
                    >
                        <view class="detail-comment-item-img">
                            <image src="../../static/disc.png" mode=""></image>
                        </view>
                        
                        <view class="detail-comment-item-content">
                            <view class="detail-comment-item-content-title">
                                <view class="name">
                                    <view>
                                        是阿荣的容
                                    </view>
                                    <view>
                                        2022年01月22日
                                    </view>
                                </view>
                                <view class="like">
                                    56027
                                    <text class="iconfont iconlike"></text>
                                </view>
                            </view>
                            
                            <view class="detail-comment-item-content-text">
                                测试文字
                                测试文字
                                测试文字
                                测试文字
                                测试文字
                            </view>
                        </view>
                    </view> -->
                    
                    <view
                        class="detail-comment-item"
                        v-for="(item, index) in songComment"
                        :key="index"
                    >
                        <view class="detail-comment-item-img">
                            <image :src="item.user.avatarUrl"></image>
                        </view>
                        
                        <view class="detail-comment-item-content">
                            <view class="detail-comment-item-content-title">
                                <view class="name">
                                    <view>
                                        {{ item.user.nickname }}
                                    </view>
                                    <view>
                                        {{formatTime(item.time)}}
                                    </view>
                                </view>
                                <view class="like">
                                    {{item.likedCount}}
                                    <text class="iconfont iconlike"></text>
                                </view>
                            </view>
                            
                            <view class="detail-comment-item-content-text">
                                {{item.content}}
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import musicHead from "../../components/music-head/music-head.vue";    
    import {
        songDetail,
        songSimi,
        songComment,
        songLyric,
        songUrl
    } from '../../common/api.js';
    
    import {
        formatCount,
        formatTime,
        convertTimeStringToTimeStamp,
    } from '../../common/utils.js'
    
    export default {
        comments: {
            musicHead,
        },
        onLoad(options) {
          console.log('---0-options: ', options);
          this.getMusic(options.songId)
          
        },
        data() {
            return {
                songDetail: {
                    name: '',
                    al: {
                        picUrl: ''
                    }
                },
                songSimi: [],
                songComment: [],
                songLyric: {},
                songUrl: {},
                lyricCurrentIndex: 0,
                bgAudioManager: null,
                iconPlay: 'iconpause',
                isPlayRotate: true
            };
        },
        methods:{
            formatCount,
            formatTime,
            getMusic(songId) {
                Promise.all([
                    songDetail(songId),
                    songSimi(songId),
                    songComment(songId),
                    songLyric(songId),
                    songUrl(songId),
                ]).then(res => {
                    console.log('----res: ', res);
                    if (res[0][1].data.code === 200) {
                        this.songDetail = res[0][1].data.songs[0]
                    }
                    
                    if (res[1][1].data.code == 200) {
                        this.songSimi = res[1][1].data.songs
                    }                   
                    
                    if (res[2][1].data.code == 200) {
                        this.songComment = res[2][1].data.hotComments
                    }                   
                    
                    if (res[3][1].data.code == 200) {
                        const lyric = res[3][1].data.lrc.lyric
                        // console.log('---lyric: ', lyric);
                        const REG = /\[([^\[]+)\]([^\[]+)/g;
                        const result = []
                        lyric.replace(REG, ($0, $1, $2) => {
                            result.push({time: convertTimeStringToTimeStamp($1), lyric: $2})
                        })
                        
                        this.songLyric = result;
                    }
                    
                    
                    if (res[4][1].data.code == 200) {
                        console.log('---res4:', res[4]);
                        this.songUrl = res[4][1].data.data[0].url
                        this.bgAudioManager = uni.getBackgroundAudioManager();
                        this.bgAudioManager.title = this.songDetail.name || '';
                        this.bgAudioManager.src = this.songUrl || '';
                        
                        this.bgAudioManager.onPlay(() => {
                            this.iconPlay = 'iconpause'
                            this.isPlayRotate = true
                        })
                        
                        this.bgAudioManager.onPause(() => {
                            this.iconPlay = 'iconbofang1'
                            this.isPlayRotate = false
                        })
                    }                       
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../../common/common-mixins.scss";
    

// @include move();

.detail {
    &-play {
        width: 580rpx;
        height: 580rpx;
        background: url(~@/static/disc.png);
        background-size: cover;
        margin: 214rpx auto 0 auto;
        position: relative;
        
        
        image {
            width: 370rpx;
            height: 370rpx;
            border-radius: 50%;
            @include posac();
            // animation: 10s linear move infinite;
            @include keyframes(move) {
                from {
                    transform: rotate(0deg);
                }
                
                to {
                    transform: rotate(360deg);
                }                
            }
            
            @include animate(move, 10s, linear, infinite);
            animation-play-state: paused;
            
            // @key-frame move {
            //     from: {
            //         transform: rotate(0deg);
            //     }
                
            //     to: {
            //         transform: rotate(360deg);
            //     }
            // }
            
            &.play-run {
                animation-play-state: running;
            }
        }
        
        text {
            font-size: 100rpx;
            color: white;
            // color: red;
            width: 100rpx;
            height: 100rpx;
            @include posac();
            z-index: 10;
        }
        
        view {
            width: 230rpx;
            height: 360rpx;
            background: url(../../static/needle.png);
            background-size: cover;
            position: absolute;
            top: -200rpx;
            left: 100rpx;
            right: 0;
            margin: auto;
        }
    }
    
    &-lyric {
        font-size: 32rpx;
        color: #6f6e73;
        line-height: 82rpx;
        height: 246rpx;
        text-align: center;
        overflow: hidden;
        
        &-wrap {
            
        }
        
        &-item {
           height: 82rpx;
           
           &.active {
               color: white;
           }
        }
    }
    
    &-like {
        margin: 0 30rpx;
        
        &-head {
            font-size: 36rpx;
            color: white;
            margin: 50rpx 0;
        }
        
        &-item {
            display: flex;
            align-items: center;
            margin-bottom: 28rpx;
            
            &-img {
                width: 82rpx;
                height: 82rpx;
                border-radius: 20rpx;
                overflow: hidden;
                margin-right: 20rpx;
                
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            
            &-song {
                flex: 1;
                color: #c6c2bf;
                
                view:nth-child(1) {
                    font-size: 28rpx;
                    color: white;
                    margin-bottom: 12rpx;
                }
                view:nth-child(2) {
                    font-size: 22rpx;
                    
                    image {
                        width: 26rpx;
                        height: 20rpx;
                        margin-right: 10rpx;
                    }
                }
            }
        }
        
        text {
            color: #c6c2bf;
            font-size: 50rpx;
        }
    }
    
    &-comment {
        margin: 0 30rpx;
        
        &-head {
            font-size: 36rpx;
            color: white;
            margin: 50rpx 0;
        }
        
        &-item {
            margin-bottom: 28rpx;
            display: flex;
            
            &-img {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 18rpx;
                
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            
            &-content {
                flex: 1;
                color: #cbcacf;
                
                &-title {
                    display: flex;
                    justify-content: space-between;
                    
                    .name {
                        view:nth-child(1) {
                            font-size: 26rpx;
                        }
                        
                        view:nth-child(2) {
                            font-size: 20rpx;
                        }
                    }
                    
                    .like {
                        font-size: 28rpx;
                    }
                }
                
                &-text {
                    font-size: 28rpx;
                    line-height: 40rpx;
                    color: white;
                    margin-top: 20rpx;
                    border-bottom: 1px solid #e0e0e0;
                    padding-bottom: 50rpx;
                }
            }
        }
    }
}
</style>
